import './App.css';
import { HashRouter as Router, NavLink, Route, Routes, Navigate } from "react-router-dom";
import MsgFloat from "./components/MsgFloat/index";
import WriteMsg from "./components/WriteMsg/index";
function App() {
  return (
    <Router>
      <div className='nav-content'>
        <Routes>
          <Route path="/write" element={<WriteMsg />} />
          <Route exact path="/read" element={<MsgFloat />} />
          <Route path='*' element={<Navigate to="/read" />} />
        </Routes>
      </div>
      <div className='nav'>
        <NavLink to="/read" className={({ isActive }) => isActive ? "nav-active" : ""}>查留言</NavLink>
        <NavLink to="/write" className={({ isActive }) => isActive ? "nav-active" : ""}>写留言</NavLink>

      </div>
    </Router>
    // <>
    //   {/* <Router>
    //     <Routes>
    //       <Route path="/write" component={WriteMsg} />
    //       <Route exact path="/a" component={MsgFloat} >
    //       </Route>
    //     </Routes>
    //   </Router> */}
    //   <MsgFloat></MsgFloat>

    // </>


    // <div className="massage-wraper">
    //   <div className='msg-float'>
    //     <p className={floatClass}>留言xxxxxx11111{floatClass}</p>
    //     <p className='text-float'>留言xxxxxxxx</p>
    //     <p className='text-float'>留言xxxxxxxx</p>
    //     <p className='text-float'>留言xxxxxxxx</p>
    //   </div>
    //   <div className='msg-input'>
    //     <input type="text" placeholder='输入留言暗号' />
    //     <span>查找留言</span>

    //   </div>
    //   <div className='msg-show'>
    //     <ul>
    //       <li>留言1111xxxxxxxx</li>
    //       <li>留言1111xxxxxxxx</li>
    //       <li>留言1111xxxxxxxx</li>
    //       <li>留言1111xxxxxxxx</li>
    //     </ul>
    //   </div>

    // </div>
  );
}

export default App;
